<script setup lang="ts">
import { PropType, watch, ref } from "vue";
import ActionEle from "./ActionEle.vue";
const
  props = defineProps({
    modelValue: { type: Object as PropType<gt.components.SideBar.Action> },
    data: { type: Array as PropType<gt.components.SideBar.Action[]>, default: [] as gt.components.SideBar.Action[], },
  }),
  current = ref<gt.components.SideBar.Action>(),
  show = ref(false),
  emit = defineEmits<{
    (event: "update:modelValue", value: gt.components.SideBar.Action): void;
    (event: "action", value: gt.components.SideBar.Action, e: MouseEvent): void;
  }>();

function emitf(d: gt.components.SideBar.Action, e: MouseEvent) {
  e.stopPropagation();
  current.value = d;
  emit("update:modelValue", d);
  d._click instanceof Function && d._click(d, e);
  emit("action", d, e);
}
watch(() => props.modelValue, (n) => { current.value = n; }, { immediate: true });
function init(d: gt.components.SideBar.Action[]) {
  d.forEach(e => {
    if (!e._symbol) {
      e._symbol = Symbol(e.label || e.title || e.name);
    }
    if (e.children) init(e.children);
  });
}
let b = 1;
watch(() => props.data, (n) => {
  if (b) {
    b = 0;
    show.value = false;
    init(n);
    show.value = true;
    next(() => { b = 1; });
  }
}, { immediate: true, deep: true });
</script>
<template>
  <div class="Action" v-show="show">
    <div class="box y">
      <ActionEle v-for="(a, ai) in data" :key="ai" :class="a.cls" :data="a" v-model:active="current" @action="emitf" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Action {
  position: relative;

  >.box {
    height: max-content;
  }
}
</style>